<template>
  <div id="app">
    <div class="conter">
      <img alt="背景图片" src="../切图/背景.png" />
    </div>
    <div class="jihui">还有3次抽奖机会</div>
    <div>
      <div class="conter1">
        <img
          src="../切图/奖品图.png"
          height="100px"
          width="180px"
          alt="我是奖品"
        />
        <span>一等奖</span>
      </div>
      <div class="conter2">
        <img
          src="../切图/奖品图.png"
          height="100px"
          width="180px"
          alt="我是奖品"
        />
        <span>二等奖</span>
      </div>
      <div class="conter3">
        <img
          src="../切图/奖品图.png"
          height="100px"
          width="180px"
          alt="我是奖品"
        />
        <span>三等奖</span>
      </div>
      <div class="conter4">
        <img
          src="../切图/奖品图.png"
          height="100px"
          width="180px"
          alt="我是奖品"
        />
        <span>四等奖</span>
      </div>
      <div class="conter5">
        <img
          src="../切图/奖品图.png"
          height="100px"
          width="180px"
          alt="我是奖品"
        />
        <span>五等奖</span>
      </div>
      <div class="conter6">
        <img
          src="../切图/奖品图.png"
          height="100px"
          width="180px"
          alt="我是奖品"
        />
        <span>六等奖</span>
      </div>
      <div class="conter7">
        <img
          src="../切图/奖品图.png"
          height="100px"
          width="180px"
          alt="我是奖品"
        />
        <span>七等奖</span>
      </div>
      <div class="conter8">
        <img
          src="../切图/奖品图.png"
          height="100px"
          width="180px"
          alt="我是奖品"
        />
        <span>八等奖</span>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom1"></div>
      <div class="bottom2"></div>
    </div>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  data() {
    return {
      list: [
        {
          id: 1,
          text: "奖品1",
        },
        {
          id: 2,
          text: "奖品2",
        },
        {
          id: 3,
          text: "奖品3",
        },
        {
          id: 4,
          text: "奖品4",
        },
        {
          id: 5,
          text: "奖品5",
        },
        {
          id: 6,
          text: "奖品6",
        },
        {
          id: 7,
          text: "奖品7",
        },
        {
          id: 8,
          text: "奖品8",
        },
      ],
    };
  },
};
</script>

<style>
body,
html {
  margin: 0;
  padding: 0;
}
img {
  border: 0;
}
.conter {
  position: relative;
  width: 100%;
  height: 100%;
}

.conter1 {
  position: absolute;
  top: 489px;
  left: 84px;
  width: 310px;
  height: 190px;
}
.conter1 span {
  display: block;
  margin-left: -143px;
  margin-top: -13px;
  font-size: 20px;
  text-align: center;
}
.conter2 {
  position: absolute;
  top: 489px;
  left: 278px;
  width: 310px;
  height: 190px;
}
.conter2 span {
  display: block;
  margin-left: -143px;
  margin-top: -13px;
  font-size: 20px;
  text-align: center;
}
.conter3 {
  position: absolute;
  top: 489px;
  left: 474px;
  width: 310px;
  height: 190px;
}
.conter3 span {
  display: block;
  margin-left: -143px;
  margin-top: -13px;
  font-size: 20px;
  text-align: center;
}

.conter4 {
  position: absolute;
  top: 643px;
  left: 474px;
  width: 310px;
  height: 190px;
}
.conter4 span {
  display: block;
  margin-left: -143px;
  margin-top: -13px;
  font-size: 20px;
  text-align: center;
}

.conter5 {
  position: absolute;
  top: 798px;
  left: 474px;
  width: 310px;
  height: 190px;
}
.conter5 span {
  display: block;
  margin-left: -143px;
  margin-top: -13px;
  font-size: 20px;
  text-align: center;
}
.conter6 {
  position: absolute;
  top: 798px;
  left: 282px;
  width: 310px;
  height: 190px;
}
.conter6 span {
  display: block;
  margin-left: -143px;
  margin-top: -13px;
  font-size: 20px;
  text-align: center;
}
.conter7 {
  position: absolute;
  top: 798px;
  left: 86px;
  width: 310px;
  height: 190px;
}
.conter7 span {
  display: block;
  margin-left: -143px;
  margin-top: -13px;
  font-size: 20px;
  text-align: center;
}

.conter8 {
  position: absolute;
  top: 650px;
  left: 86px;
  width: 310px;
  height: 190px;
}
.conter8 span {
  display: block;
  margin-left: -143px;
  margin-top: -13px;
  font-size: 20px;
  text-align: center;
}

.jihui {
  position: absolute;
  width: 250px;
  height: 100px;
  font-size: 2rem;
  top: 347px;
  left: 250px;
}
</style>
